import { Input, List, Tag } from "@douyinfe/semi-ui";
import { useState } from "react";
import http from "../http";
import styles from "./search.module.css";
import { getNodeName, highLightSearchKeyword } from "../utils";
import { useTreeStore } from "../store";
import { ITreeNode } from "../types";

type SearchResult = {
  filePath: string;
  context?: string;
};

function Search({ onConfirm }: { onConfirm: (k: string) => void }) {
  const [keyword, setKeyword] = useState("");
  const [searchList, setSearchList] = useState<SearchResult[]>([]);
  const { tree } = useTreeStore();
  const handleInputChange = (content: string) => {
    setKeyword(content);
    setSearchList([]);
  };

  const searchFileName = (input: ITreeNode[],keyword: string)=> {
    const tmp = searchList;
    input.forEach(x=> {
        if (x.children && x.children.length>0) {
            searchFileName(x.children, keyword)
        }
        if (x.label.toString().indexOf(keyword)> -1 && !x.isDir && x.key) {
            tmp.push({
                filePath: x.key
            })
        }
    })
    return tmp;
  }

  const handleSearch = () => {
    const tmpList = searchFileName(tree ?? [], keyword)
    if (keyword) {
      http.get("/search?keyword=" + keyword).then((x: any) => {
        setSearchList(tmpList.concat(x.data));
      });
    }
  };

  const handleClickSearchResult = (item: SearchResult) => {
    if (onConfirm) {
      onConfirm(item.filePath);
    }
  };

  return (
    <div style={{ width: "100%" }}>
      <Input
        placeholder={"输入内容,按回车搜索"}
        onChange={handleInputChange}
        onEnterPress={handleSearch}
      ></Input>
      {searchList && searchList.length > 0 ? (
        <>
          <div className={styles.searchResultTitle}>
            搜索结果：{searchList.length}
          </div>
          <List className={styles.list}>
            {searchList.map((l) => (
              <List.Item
                key={l.filePath}
                className={styles.listItem}
                onClick={() => handleClickSearchResult(l)}
                extra={!l.context && <Tag >文件名搜索</Tag> }
                main={
                  <div className={styles.searchResultItemBody}>
                    <span className={styles.searchResultItemTitle}>
                      {getNodeName(l.filePath)}
                    </span>
                    <span className={styles.searchResultItemFullPath}>
                      {" "}
                      {l.filePath}
                    </span>
                    <div className={styles.searchResultItemContext}>
                      <div
                        dangerouslySetInnerHTML={{
                          __html:
                            highLightSearchKeyword(l.context, keyword) ?? "",
                        }}
                      ></div>
                    </div>
                  </div>
                }
              />
            ))}
          </List>
        </>
      ):
      <div className="w-full flex justify-center" style={{marginTop: '15px', color:'#999'}}>
        空空～
      </div>
      }
    </div>
  );
}

export default Search;
